<template>
  <div class="dish-flavor-container">
    <div>
      <el-dropdown>
        <el-button type="primary">
          更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :key="flavor.name" v-for="flavor in allDishFlavor" @click.native="handleClick">
            {{ flavor.name }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="口味"
        width="120px">
      </el-table-column>
      <el-table-column
        prop="value"
        label="选项">
        <template slot-scope="scope">
          <el-tag style="margin: 0 3px"
                  v-for="flavorValueItem in scope.row.value" size="medium"
                  closable
                  @close="closeTagCallback(scope.row.name,flavorValueItem)"
          >
            {{ flavorValueItem }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="value">
        <template slot-scope="scope">
          <el-button @click="deleteTheFlavorOfTb(scope.row.name)" type="danger">删除口味</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      allDishFlavor: [
        {'name': '甜味', 'value': ['无糖', '少糖', '半糖', '多糖', '全糖']},
        {'name': '温度', 'value': ['热饮', '常温', '去冰', '少冰', '多冰']},
        {'name': '忌口', 'value': ['不要葱', '不要蒜', '不要香菜', '不要辣']},
        {'name': '辣度', 'value': ['不辣', '微辣', '中辣', '重辣']}
      ]
    }
  },
  methods: {
    deleteTheFlavorOfTb(flavorName) {
      for (let i = 0; i < this.tableData.length; i++) {
        let dishFlavor = this.tableData[i];
        if (dishFlavor.name === flavorName) {
          this.tableData.splice(i, 1);
        }
      }
    },
    closeTagCallback(flavorName, flavorValueItem) {
      for (let i = 0; i < this.tableData.length; i++) {
        let dishFlavor = this.tableData[i];
        if (dishFlavor.name === flavorName) {
          if (dishFlavor.value.length <= 1) {
            this.deleteTheFlavorOfTb(flavorName);
            return;
          }
          for (let j = 0; j < dishFlavor.value.length; j++) {
            let valueItem = dishFlavor.value[j];
            if (valueItem === flavorValueItem) {
              this.tableData[i].value.splice(j, 1);
              return;
            }
          }
        }
      }
    },
    handleClick(event) {
      let innerText = event.target.innerText;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].name === innerText) {
          this.$message.warning(`添加口味失败，口味已存在，在下方表格的第${i + 1}行`);
          return;
        }
      }
      for (let i = 0; i < this.allDishFlavor.length; i++) {
        if (this.allDishFlavor[i].name === innerText) {
          this.tableData.push(this.allDishFlavor[i]);
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dish-flavor-container {


}

</style>
